<!-- 商品详情页 商品图片轮播组件 -->
<template>
  <div>
    <div class="bg-img-swiper" v-if="background_pic">
      <img class="bg-pic" :src="background_pic" alt="">
      <div class="bg-img-swipe-main">
        <van-swipe :show-indicators="showInd" indicator-color="white" :autoplay="autoplay" ref="swipe">
          <van-swipe-item v-if="!fun.isTextEmpty(goods_video)">
            <video
              style="width: 100%;border-radius: 10px;overflow: hidden; display: block;object-fit: cover;"
              :poster="video_image"
              :src="goods_video"
              @ended="ended"
              @pause="pause"
              @play="play"
              controls
              webkit-playsinline="true"
              playsinline="true"
              x5-playsinline="true"
              x-webkit-airplay="true"
              x5-video-ignore-metadata="true"
              width="100%"
              height="100%"
            >
              <source :src="goods_video" />
            </video>
          </van-swipe-item>

          <template v-if="!goods_video || (goods_video && !hide_goods_pic)">
            <van-swipe-item v-if="!thumb_url || thumb_url == null || thumb_url.length == 0" @click="handleClick">
              <img :src="thumb" width="100%" referrerPolicy="no-referrer"/>
            </van-swipe-item>
            <van-swipe-item v-for="(ithumb, index) in thumb_url" style="position: relative;" :key="index" @click="handleClick($event, ithumb)">
              <template v-if="ithumb && !banner">
                <img :src="ithumb" width="100%" referrerPolicy="no-referrer"/>
                <div class="number-box">{{ index + 1 }} / {{ thumb_url.length }}</div>
              </template>
              <template v-if="ithumb && banner">
                <img :src="ithumb.thumb_src" alt="" referrerPolicy="no-referrer" width="100%" style="border-radius: 0.5rem" />
              </template>
            </van-swipe-item>
          </template>
        </van-swipe>
      </div>
    </div>

    <van-swipe v-else :show-indicators="showInd" indicator-color="white" :autoplay="autoplay" ref="swipe">
      <van-swipe-item v-if="!fun.isTextEmpty(goods_video)">
        <video
          ref="goods_vedio"
          id="goods_vedio"
          style="width: 100%; height: 100%; object-fit: scale-down;"
          :poster="video_image"
          :src="goods_video"
          @ended="ended"
          @pause="pause"
          @play="play"
          controls
          webkit-playsinline="true"
          playsinline="true"
          x5-playsinline="true"
          x-webkit-airplay="true"
          x5-video-ignore-metadata="true"
          width="100%"
          height="100%"
        >
          <source :src="goods_video" />
        </video>
      </van-swipe-item>
      <template v-if="!goods_video || (goods_video && !hide_goods_pic)">
        <!-- 供应商其他图片为空的时候返回的是空数组 -->
        <van-swipe-item v-if="!thumb_url || thumb_url == null || thumb_url.length == 0" @click="handleClick">
          <img :src="thumb" width="100%" referrerPolicy="no-referrer"/>
        </van-swipe-item>
        <van-swipe-item v-for="(ithumb, index) in thumb_url" style="position: relative;" :key="index" @click="handleClick($event, ithumb)">
          <template v-if="ithumb && !banner">
            <img :src="ithumb" width="100%" referrerPolicy="no-referrer"/>
            <div class="number-box">{{ index + 1 }} / {{ thumb_url.length }}</div>
          </template>
          <template v-if="ithumb && banner">
            <img :src="ithumb.thumb_src" alt="" referrerPolicy="no-referrer" width="100%" style="border-radius: 0.5rem" />
          </template>
        </van-swipe-item>
      </template>
    </van-swipe>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  props: {
    thumb_url: {
      type: [Array, String],
      default: () => []
    },
    thumb: {
      type: String,
      default: null
    },
    goods_video: {
      type: String,
      default: ""
    },
    video_image: {
      type: String,
      default: ""
    },
    // 适用宽度固定，高度自适应的轮播
    banner: {
      type: Boolean,
      default: false
    },
    // 是否显示指示器
    showInd: {
      type: Boolean,
      default: false
    },
    background_pic: {
      type: String,
      default: "" //商品详情页主图背景图
    },
    hide_goods_pic: {
      type: Number,
      default: 0 //隐藏商品图片 0 否 1是 开启后，商品详情页不显示商品图片和其他图片
    },
  },
  deactivated() {
    this.timeId = null;
  },
  data() {
    return {
      timeId: null,
      play_statue: true
    };
  },
  computed: {
    autoplay() {
      return this.play_statue ? '4000' : false;
    }
  },
  methods: {
    //播放结束
    ended() {
      this.play_statue = true;
    },
    //暂停()
    pause() {
      this.play_statue = true;
    },
    //开始播放
    play() {
      this.play_statue = false;
    },
    handleClick(event, item) {
      if (this.banner) {
        if (item.url) {
          window.location.href = item.url;
        }
        return;
      }
      if (this.thumb_url && this.thumb_url.length !== 0) {
        ImagePreview({ images: this.thumb_url, closeable: true });
      } else {
        ImagePreview({ images: [event.srcElement.currentSrc], closeable: true });
      }
    }
  },
  watch: {
    video_image() {
      this.timeId = setTimeout(() => {
        this.$refs.swipe.resize();
      }, 300);
    },
    thumb_url() {
      this.timeId = setTimeout(() => {
        this.$refs.swipe.resize();
      }, 300);
    },
    goods_video() {
      this.timeId = setTimeout(() => {
        this.$refs.swipe.resize();
      }, 300);
    },
    thumb() {
      this.timeId = setTimeout(() => {
        this.$refs.swipe.resize();
      }, 300);
    }
  }
};
</script>
<style lang="scss" scoped>
img{
  margin: 0;
  display: block;
}
.number-box {
  position: absolute;
  right: 15px;
  bottom: 10px;
  font-size: 12px;
  padding: 4px 15px;
  color: #fff;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.4);
}
.bg-img-swiper {
  position: relative;
  .bg-pic {
    width: 100%;
    display: block;
  }
  .bg-img-swipe-main {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
  }
  .van-swipe img{
    border-radius: 12px;
  }
  .van-swipe ::v-deep .van-swipe__track {
    align-items: end;
    overflow: hidden;
    border-radius: 10px;
  }
}

</style>
